<template>
    <div>
        <h2>{{name}}-{{age}}</h2>

        <button @click="changeName">修改name</button>
        <button @click="changeAge">修改age</button>
    </div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
    setup() {
        const name = ref("luffy");
        const age =  ref(18);

        const changeName = () => name.value = "yzh";
        // const changeAge = () => age.value++;
        const changeAge = () => {
            age.value++;
            if(age.value > 25) {
                stopWat();   //停止监听
            };
        };

        //自动收集响应式依赖 页面进入调用
        // watchEffect(() => {
        //     console.log(name.value, age.value)
        // })
        const stopWat = watchEffect(() => {
            console.log(name.value, age.value)
        })

        return {
            name,
            age,
            changeName,
            changeAge
        }
    }
}
</script>
<style>
</style>
